// 页面加载时渲染历史记录
window.onload = () => {
  const history = getHistory();
  renderHistory(history);
};

// 获取翻译历史
function getHistory() {
  const historyStr = localStorage.getItem('translationHistory');
  if (historyStr) {
    return JSON.parse(historyStr);
  }
  return [];
}

// 清空翻译历史
function clearHistory() {
  localStorage.removeItem('translationHistory');
  renderHistory([]);
}

function renderHistory(history) {
  const historyList = document.getElementById('historyList');
  historyList.innerHTML = ''; // 清空列表内容

  history.forEach(item => {
    const truncatedSrc = item.src.slice(0, 5) + (item.src.length > 5 ? '...' : '');
    const truncatedDst = item.dst.slice(0, 5) + (item.dst.length > 5 ? '...' : '');
    const formattedTime = new Date(item.time).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    });

    // 创建列表项和按钮元素
    const listItem = document.createElement('li');
    const viewButton = document.createElement('button');

    // 设置按钮的文本和事件监听器
    viewButton.textContent = '查看完整记录';
    viewButton.addEventListener('click', () => showModal(JSON.stringify(item)));

    // 设置列表项的HTML内容
    listItem.innerHTML = `
      <div>原文: ${truncatedSrc}</div>
      <div>译文: ${truncatedDst}</div>
      <div>时间: ${formattedTime}</div>
    `;

    // 将按钮添加到列表项中
    listItem.appendChild(viewButton);

    // 将列表项添加到历史列表中
    historyList.appendChild(listItem);
  });
}

function showModal(itemStr) {
  const modal = document.getElementById('historyModal');
  const modalContent = document.getElementById('modalText');
  const item = JSON.parse(itemStr);

  modal.style.display = "block"; // 假设您希望使用block而不是flex来显示模态弹窗

  // 清除模态弹窗的当前内容
  modalContent.innerHTML = '';

  // 创建并添加原文和译文元素
  const originalText = document.createElement('div');
  const translatedText = document.createElement('div');
  originalText.classList.add("OTtext");
  translatedText.classList.add("OTtext");
  originalText.textContent = `原文: ${item.src}`;
  translatedText.textContent = `译文: ${item.dst}`;
  modalContent.appendChild(originalText);
  modalContent.appendChild(translatedText);

  // 如果需要显示时间，在这里添加时间元素并设置内容
  // 例如：
  const timeElement = document.createElement('div');
  timeElement.textContent = `时间: ${new Date(item.time).toLocaleString()}`;
  modalContent.appendChild(timeElement);

  // 添加关闭模态弹窗的功能
  const span = document.getElementsByClassName("close")[0];
  span.onclick = function () {
    modal.style.display = "none";
  }

  // 点击其他地方关闭模态弹窗（如果需要的话）
  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}